
<div id="main-wrapper">
	<h1>投票详情</h1>
	<ul id="list-viewvote" class="list-group">
		<li class="list-group-item">
			<span class="li-label">题目</span>
			<p id="content"></p>
		</li>
		<li class="list-group-item">
			<span class="li-label">相关选项</span>
			<ul id="words">
				<script type="text/html" id= "li-tmpl">
					<li>
						<div class="square-word"></div>
						<span class="word"><%- word %></span>
					</li>
				</script>
			</ul>
		</li>
		<li class="list-group-item">
			<ul class="nav nav-tabs">
				<li>
					<a class="ex-link" href="#tab-chart" data-toggle="tab">图表结果</a>
				</li>
				<li>
					<a class="ex-link" href="#tab-counts" data-toggle="tab">人数详情</a>
				</li>
			</ul>
			<div class="tab-content">
				<div class="tab-pane active" id="tab-chart">
					<canvas id="chart" width="350" height="350"></canvas>
				</div>
				<div class="tab-pane active" id="tab-counts">
					<ul id="counts"></ul>
				</div>
			</div>
		</li>
	</ul>
</div>

<script> 
	var vid = getHashParams()['vid'],
		colors = ["#F38630", "#E0E4CC", "#69D2E7", "#5E344C"],
		$ulWord = $('#words'),
		liTmpl = _.template($ulWord.find('#li-tmpl').html());

	// tabs pages
	$('.nav-tabs a').click(function(ev){
		ev.preventDefault();
        update();
		$(this).tab('show');
	}).first().tab('show');

    update();

	function update(){
		$('.tab-content').hide();
		$.get('/do/s/viewvote?vid=' + vid, function(resObj){
			var ok = resObj['ok'], msg = resObj['msg'];
			msg && notify(msg, ok);
			if (! ok) return window.history.back();
			var vote = resObj['vote'],
				content = vote['content'],
				options = vote['options'];

			$('#content').text(content);
			$ulWord.html(_.reduce(options, function(memo, option){
				return memo + liTmpl({
					word: option.word
				});
			 }, ''));
			var sum = _.reduce(options, function(memo, option){
					return memo + option.count;
				}, 0),
				countHtml = _.reduce(options, function(memo, option){
					return memo + [
						'<li>',
						'<div class="square-count"></div>',
							'<span class="count">'+ option.count +'&nbsp;&nbsp;&nbsp;('
									+ (sum ? ((option.count/sum)*100).toFixed(2) : 0) +
								'%)</span>',
						'</li>'
					].join('');
				}, '');
			$('#counts').html(countHtml);
			$('.square-word').each(function(i, el) {
				$(el).css('background-color', colors[i]);
			});
			$('.square-count').each(function(i, el) {
				$(el).css('background-color', colors[i]);
			});
			$('#chart').drawPieChart(options, colors);
			$('.tab-content').show();
		});
	}
</script>